<script setup>

</script>

<template>
 
        <div class="layer1"></div>
        <div class="layer2"></div>
        <div class="layer3"></div>
        <div class="layer4"></div>
        <div class="layer5"></div>
        <div class="title"></div>
<!-- Sass 星空 -->
</template>

<style lang="scss" scoped>
// .contianer1 {
//     height: 100%;
//     background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
//     // background-color: #090a0f;
//     overflow: hidden;
// }

.title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    color: #fff;
    text-align: center;
    font-family: 'lato', sans-serif;
    font-weight: 300;
    font-size: 50px;
    letter-spacing: 10px;
    margin-top: -60px;
    padding-left: 10px;
    background: linear-gradient(white, #38495a);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;

}

@function getShadows($n) {
    $shadows: '#{random(100)}vw #{random(100)}vh #fff';

    @for $i from 2 through $n {
        $shadows: '#{$shadows} , #{random(100)}vw #{random(100)}vh #fff';
    }

    @return unquote($shadows);
}

$duration: 1000s;
$count: 1000;

@for $i from 1 through 5 {
    $duration: floor($duration / 2);
    $count: floor($count / 2);
    .layer#{$i} {
    position: fixed;
    $size: #{$i}px;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: #f40;
    box-shadow: getShadows($count);
    animation: moveup $duration linear infinite;
    &::after {
        content: '';
        position: fixed;
        width: inherit;
        height: inherit;
        left: 0;
        top: 100vh;
        border-radius: inherit;
        box-shadow: inherit;
    }
}
}

// .layer1 {
//     position: fixed;
//     $size: 20px;
//     $duration: 5s;
//     width: $size;
//     height: $size;
//     border-radius: 50%;
//     background: #f40;
//     box-shadow: getShadows(1000);
//     animation: moveup $duration linear infinite;
//     &::after {
//         content: '';
//         position: fixed;
//         width: inherit;
//         height: inherit;
//         left: 0;
//         top: 100vh;
//         border-radius: inherit;
//         box-shadow: inherit;
//     }
// }

@keyframes moveup {
    to {
        transform: translateY(-100vh);
    }
}
</style>